HTML (HyperText Markup Language，超文本標記語言)，是一種用來建立網站結構的語言，透過包含標籤 (Tag) 與內容 (Content) 的元素 (Element) 告訴瀏覽器該如何呈現網頁，想寫網頁的話，就要從 HTML 開始學習。
元素就是標記 (Markup)的概念，將一段內容利用標籤標記起來，賦予內容特定的特性。通常元素架構會長成這樣：
<tag attribute="value">我是元素內容</tag>
<tag>、結束標籤 </tag>： 元素通常就是由成對的標籤組成，標籤的意義在於將網頁以結構化來呈現。直接開啟 CodeSandbox 的 Static Template，看一看 HTML 的文件要素有哪些。
在 index.html 裡你會看到：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 可以暫時忽略下面兩行 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<h1>This is a static template, there is no bundler or bundling involved!</h1>
</body>
</html>
<!DOCTYPE html>：告訴瀏覽器文件屬於什麼類型<html></html>：包住網頁的所有內容<meta charset="UTF-8">：指定文件的編碼格式<title></title>：指定網頁的標題<head></head>：宣告一些不會讓使用者看到的網頁資訊，比如：標題、外部連結、腳本等等。<body></body>：呈現給使用者的網頁內容，也是主要進行網頁編輯的區塊。了解 HTML 文件的架構後，就讓我們直接在 <body></body> 內依序新增幾個常用的元素標籤來編輯網頁。
<h1>~<h6><h1>我是標題h1</h1>
<h2>我是標題h2</h2>
<h3>我是標題h3</h3>
<p><p>我是是段落文字段落文字段落文字</p>
<a><a href="https://www.youtube.com/" >Youtube連結</a>
<ul>/<ol>/<li><ul>
<ol>
<li>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
<img><img src="圖片連結" alt="替代文字">
是不是很簡單！只要針對網頁的內容去活用各種標籤，你就能做出網頁囉
除了能用標籤劃分單獨的文字內容，HTML 提供區塊元素，讓網頁的內容可以以區塊作區分，清楚的劃分網頁的結構。
<div>基本上只是一個用來包裹內容的容器元素，本身不代表任何意義。
<div>
<h1>我是標題h1</h1>
<p>我是是段落文字段落文字段落文字</p>
</div>
所以為了能清楚表示區塊的意義，HTML5 還提供了語意化的標籤，賦予標籤意義，加強文件的結構化。
分析一下 Notion官網 的結構：
<header>：表示頁面或區塊內的首要部分<nav>：網站的導航列<main>：頁面的主要區塊，一個頁面只能有一個。<section>：單獨區塊，通常裡面含有標題。<footer>：頁面的結尾，通常會用來表示一些網站資訊或導覽、連結。這個章節提到一些 HTML 的基本知識，當然除了文章裡面提到的各種元素和標籤，HTML 還提供了很多樣式的元素，讓我們能夠呈現更多不同的網頁資訊。如果你想要踏入前端這個領域，就一定一定要去學習更多標籤的使用！
想了解更多 HTML 元素可參考：HTML elements reference
目前只有白底黑字的網頁一點都不好看！所以明天就讓我們來會一會讓網站變漂亮變美的 — CSS 魔術大師。
如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱喔❤️
iThome鐵人賽
看影片追技術